<template>
  <div class="wrapper">
    <!-- <cropperUpload
    :otherData="{ a: 100 }"
    :headers="{}"
    v-model="urlList"
    :multiple="true"
    sendUrl="http://localhost:3000/api/upload/album"
  /> -->
    <!-- <Cascade :datas="datas" /> -->
    <!-- <LightCardComp />
    <TitleTag
      :content="'员工管理'"
      :category="'pattern'"
      :color="'#ff0000'"
      :fontSize="'60'"
      :text-align="'center'"
    /> -->
    <CustomScroller />
  </div>
  <!-- <PaperComp>
    <span>纸张拟态</span>
  </PaperComp> -->
  <!-- <SnakeSteps @stepClick="stepClick" :snakeSteps="stepList" /> -->
  <!-- <CountTo
    :start="0"
    :end="10000"
    :duration="3000"
    :autoPlay="true"
    prefix="¥"
    suffix="元"
  />
  <SnowflakeComp :font-size="'5px'" /> -->
  <!-- <DigitNumberComp :digit-color="'red'" :colon-animate="true" />
  <ContextMenu
    :menu="[
      { label: '编辑', value: 'edit', icon: 'el-icon-edit' },
      { label: '删除', value: 'delete', icon: 'el-icon-delete' },
      { label: '分享', value: 'share', icon: 'el-icon-share' },
      {
        label: '下载',
        value: 'download',
        icon: 'el-icon-download'
      }
    ]"
    @select-handle="selectHandle"
  >
    <div class="edit-mian-box">
      <div class="edit-box">11111</div>
    </div></ContextMenu
  > -->
  <!-- <div class="special-effects">
    <strong>公司管理</strong>
  </div> -->
  <!-- <CountdownComp
    ref="countdownRef"
    :time="6000"
    :format="'ss'"
    @finish-handle="finishHandle"
  />
  <el-button @click="handleCountdwn">开始倒计时</el-button>

  <div class="container">
    <div class="item" v-mouse-direction v-for="n in 10" :key="n" v-slide-in>
      {{ n }}
    </div>
  </div> -->
</template>

<script setup lang="ts">
// 模块引入
// import { ref } from 'vue'
// import CropperUpload from '@/components/upload/index.vue'
// import Cascade from '@/components/cascade/index.vue'
// import datas from '@/components/cascade/beijin.json'
// import TitleTag from '@/components/staticPages/titleTag/index.vue'
// import SnakeSteps from '@/components/staticPages/snakeSteps/index.vue'
// import type { ISnakeStep } from '@/components/staticPages/snakeSteps/type.ts'
// import CountTo from '@/components/countTo/index.vue'
// import SnowflakeComp from '@/components/staticPages/snowflake/index.vue'
// import DigitNumberComp from '@/components/staticPages/digitNumber/index.vue'
// import ContextMenu from '@/components/staticPages/contextMenu/index.vue'
// import CountdownComp from '@/components/staticPages/countdown/index.vue'
// import LightCardComp from '@/components/staticPages/lightCard/index.vue'
// import PaperComp from '@/components/staticPages/paper/index.vue'
import CustomScroller from '@/components/staticPages/customScroller/index.vue'
import { user } from '@/utils/decorators/entity'
defineOptions({
  // 组件名称
  name: 'Employee',
  // 继承透传，是否继承没在子组件声明的父组件的属性
  inheritAttrs: true
})

// const fieldName = Account.getFieldName('username')
console.log(user.name)

// const countdownRef = ref()
// const stepList: ISnakeStep[] = [
//   { id: '1', name: '确定意向', status: 'success', description: 'ssss' },
//   { id: '2', name: '对接洽谈', status: 'finish' },
//   { id: '3', name: '制定方案', status: 'process' },
//   { id: '4', name: '项目报价', status: 'wait' },
//   { id: '5', name: '投标评审', status: 'error' },
//   { id: '6', name: '合同拟定', status: 'wait' },
//   { id: '7', name: '合同签订', status: 'finish' },
//   { id: '8', name: '转化完成', status: 'finish' },
//   { id: '9', name: '合同跟踪', status: 'finish' },
//   { id: '10', name: '合同回款', status: 'wait' },
//   { id: '11', name: '项目交付', status: 'wait' },
//   { id: '13', name: '项目验收', status: 'wait' },
//   { id: '14', name: '项目结束', status: 'wait' }
// ]
// const finishHandle = () => {
//   console.log('finishHandle')
// }
// const handleCountdwn = () => {
//   countdownRef.value.start()
// }
// const stepClick = (dto: ISnakeStep) => {
//   console.log(dto)
// }

// const selectHandle = (dto: any) => {
//   console.log(dto)
// }
// const urlList = reactive([
//   'https://img1.baidu.com/it/u=4049022245,514596079&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500'
// ])
</script>

<style scoped lang="scss">
.container {
  margin: 1em auto;
  width: 80%;
  .item {
    width: 100%;
    aspect-ratio: 2/1;
    margin: 5vw 0;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10vw;
    color: #fff;
    &:nth-child(1) {
      background-color: #ff4757;
    }
    &:nth-child(2) {
      background-color: #ff7f50;
    }
    &:nth-child(3) {
      background-color: #ffa07a;
    }
    &:nth-child(4) {
      background-color: #ffd700;
    }
    &:nth-child(5) {
      background-color: #90ee90;
    }
    &:nth-child(6) {
      background-color: #00ced1;
    }
    &:nth-child(7) {
      background-color: #1e90ff;
    }
    &:nth-child(8) {
      background-color: #6495ed;
    }
    &:nth-child(9) {
      background-color: #7b68ee;
    }
    &:nth-child(10) {
      background-color: #4b0082;
    }
  }
}
.special-effects {
  height: 300px;
  display: grid;
  place-items: center;
  background-color: deepskyblue;
  strong {
    font-size: 100px;
    color: #0000;
    background:
      repeating-radial-gradient(#000 0 0.0001%, #fff 0 0.0002%) 50% 0/2500px
        2500px,
      repeating-conic-gradient(#000 0 0.0001%, #fff 0 0.0002%) 50% 50%/2500px
        2500px;
    background-blend-mode: difference;
    mix-blend-mode: lighten;
    -webkit-background-clip: text;
    background-clip: text;
  }
}
.wrapper {
  margin: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 20px;
  background: #111;
}
</style>
